MVVM与MVC
1 MVC
MVC组成
MVC思想 ：Controller负责将Model的数据用View显示出来。
| MVC | 解释 |
|---|---|
| ① Model（模型） | 是应用程序中用于处理应用程序数据逻辑的部分。 <br>通常模型对象负责在数据库中存取数据。处理数据的crud |
| ② View（视图） | 是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图层，前端 |
| ③ Controller（控制器） | 是应用程序中处理用户交互的部分。 <br>控制器负责从视图读取数据，控制用户输入，并将数据发送给模型。 <br>一般包括业务处理模块和router路由模块 |
MVC优点
- 耦合度低（运用MVC的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；
- 重用性高（多个视图可以使用同一个模型）
- 生命周期成本低
- 部署快（业务分工明确）
- 可维护性高
MVC缺点：
- 不适合小型项目开发
- 视图与控制器联系过于紧密，妨碍了它们的独立重用
- 控制器所承担的责任太过重大，没有办法应付日益复杂的交互场景
2 MVVM——视图模型双向绑定（谈谈你对MVVM开发模式的理解）
MVVM 组成：
MVVM由Model，View，ViewModel三部分构成。
| M V VM | 解释 |
|---|---|
| Model | 代表数据模型（Vue的data），数据和业务逻辑都在Model层中定义； |
| View | 代表UI视图，负责数据的展示（Vue的el）； |
| ViewModel | 是一个对象，负责监听 Model 中数据的改变并且控制View视图的更新，处理用户交互操作； |
- Model 和 View 并无直接关联，而是通过 ViewModel 来进行交互的（即双向数据绑定），
- Model 和 ViewModel之间有着双向数据绑定的联系。
View的变化可以引起Model的变化，Model的变化也可以引起View变化（类似于浅拷贝）。ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
MVVM 优点：
- 低耦合：
- 视图（View）可以独立于Model变化和修改，一个Model可以绑定到不同的View上，
- 当View变化的时候Model可以不变化，当Model变化的时候View也可以不变；
- 可重用性：你可以把一些视图逻辑放在一个Model里面，让很多View重用这段视图逻辑。
- 独立开发：双向数据绑定的模式，实现了View和Model的自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要一直操作 dom。
可以实现双向绑定的标签：Input，textarea，select标签等（可以输入或改变标签内容的标签）
- MVVM 和 MVC都是一种设计思想。
- MVVM 与 MVC 最大的区别就是：它实现了View和Model的自动同步
- 当Model属性改变时，不用手动操作Dom元素去改变View的显示。
- 而改变属性后，该属性对应View的显示会自动改变
MVC 和 MVVM 都是前端用来分离关注点、组织代码的架构模式。简单说，就是让代码分成几块，各自负责不同的事，避免一团乱麻。
简述
1. MVC（Model-View-Controller）
- Model（模型）：管理数据、业务逻辑和状态。比如从服务器获取的用户列表。
- View（视图）：负责界面展示，把 Model 的数据渲染出来。在 Web 前端里就是 HTML/CSS。
- Controller（控制器）：作为中间人，处理用户交互。它接收 View 发出的操作（如点击按钮），去更新 Model，然后让 View 重新渲染。
工作流程举例（用户点击“删除”）
- View 显示一个按钮，点击后把事件交给 Controller。
- Controller 调用 Model 的删除方法。
- Model 更新数据并通知 View 刷新（或 Controller 直接让 View 重新渲染）。
前端典型代表：Backbone.js（早期）、AngularJS（早期也自称为 MVC，但其实更接近 MVVM）。
2. MVVM（Model-View-ViewModel）
它是 MVC 的变体，专为数据绑定而生。
- Model：与 MVC 一样，管数据和业务逻辑。
- View：用户看到的界面，和 MVC 的 View 类似。
- ViewModel：视图的抽象模型，代替了 Controller。它把 Model 的数据转换成 View 可以直接绑定的状态，并向外提供可被 View 调用的命令（方法）。最关键的是，它和 View 之间是通过数据绑定自动同步的。
工作流程举例（同样点击“删除”）
- View 上的按钮直接绑定到 ViewModel 的
onDelete方法（声明式绑定）。 - 点击后触发
onDelete，ViewModel 调用 Model 的删除逻辑。 - ViewModel 更新自身的属性（如列表数据），因为 View 和 ViewModel 是双向绑定的，界面自动更新，完全不需要手工操作 DOM。
前端典型代表：Vue.js（声明式绑定，典型的 MVVM 思想）、Angular（通过模板和数据绑定）。注意，React 本身不是 MVVM，它更像是“View 层库 + 单向数据流”，但有时结合 MobX 可以模拟出类似效果。
二者的核心区别
| MVC | MVVM | |
|---|---|---|
| 核心中介 | Controller 手动处理事件，手动更新 View | ViewModel 通过绑定自动同步 View |
| 视图更新方式 | Controller 主动通知 View 刷新（命令式） | 数据变化自动触发视图更新（声明式） |
| 代码重心 | Controller 里充满了 DOM 操作或渲染逻辑 | ViewModel 只关心数据与状态，不碰 DOM |
| 可测试性 | 测试需要模拟 View 和 DOM | ViewModel 是纯逻辑，很容易做单元测试 |
一个生活化的类比
- MVC 像去餐厅吃饭：客人（View）告诉服务员（Controller）要什么，服务员通知后厨（Model）做菜，菜好了服务员再端到客人面前。
- MVVM 像智能送餐轨道：客人（View）一按桌面的按钮（绑定命令），轨道系统（ViewModel）就自动把后厨（Model）准备好的菜品传送到客人桌上，中间不需要人来回跑腿。
所以，前端中的 MVVM 其实就是为了解决 MVC 模式下需要大量手工同步视图和数据的问题，通过数据绑定让开发只聚焦在数据与逻辑上，效率更高。现代主流框架如 Vue、Angular 都是 MVVM 思想的体现。